<!-- vuex 用法示例 -->
<template>
  <div class="vuex-container">
    <template v-if="isLogin">
      <div class="row">
        <div class="label">用户昵称:</div>
        <div class="value">{{ userInfo.userName }}</div>
      </div>
      <div class="row">
        <div class="label">会员等级:</div>
        <div class="value">{{ isVip ? '尊贵VIP' : '普通会员' }}</div>
      </div>
      <div class="row">
        <div class="label">邮箱地址:</div>
        <div class="value">{{ userInfo.email }}</div>
      </div>
      <div class="row">
        <div class="label">电话号码:</div>
        <div class="value">{{ userInfo.phone }}</div>
      </div>
      <div class="row">
        <div class="label">所在城市:</div>
        <div class="value">{{ userInfo.cityName }}</div>
      </div>
    </template>
    <el-button v-else @click="getUserInfo">登录</el-button>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex';

export default {
  name: 'Vuex',
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo,
    }),
    ...mapGetters({
      isLogin: 'isAuthenticated',
      isVip: 'isVip',
    }),
  },
  methods: {
    // 查询
    async getUserInfo() {
      await this.$store.dispatch('getUserInfoActions');
      console.log('this.userInfo :>> ', this.userInfo);
    },
  },
};
</script>

<style lang="scss" scoped>
.vuex-container {
  .row {
    display: flex;
    padding: 5px 10px;
    .label {
      flex: 1;
      text-align: right;
    }
    .value {
      flex: 1;
      text-align: left;
      padding-left: 10px;
    }
  }
}
</style>
